<template>
    <div class="from">
        <Header></Header>
        <div class="headers">
            <div>
                <img src="../../../static/img/logo_1.png" alt="">
            </div>
            <h2>在线留言</h2>
        </div>
        <h2>发表您的留言</h2>
        <div class="form">
            <form @submit.prevent="submitForm">
                <div class="form-group">
                    <div class="image">
                        <img src="../../../static/img/icon-women.png" alt="">
                    </div>
                    <label for="name" class="control-label">姓名</label>
                    <input type="text" id="name" class="from-control" v-model="name" placeholder="请输入姓名"  autofocus="autofocus">
                </div>
                <div class="form-group">
                     <div class="image-1">
                        <img src="../../../static/img/icon-dianhua.png" alt="">
                    </div>
                    <label for="phone" class="control-label">手机</label>
                    <input type="text" id="phone" class="from-control" v-model="phone" placeholder="请输入手机号">
                </div>
                <div class="form-group">
                     <div class="image-2">
                        <img src="../../../static/img/icon-youxiang.png" alt="">
                    </div>
                    <label for="email" class="control-label">邮箱</label>
                    <input type="email" id="email" class="from-control" v-model="email" placeholder="请输入邮箱">
                </div>
                <div class="form-group from-groups">
                     <div class="image-3">
                        <img src="../../../static/img/icon-liuyan.png" alt="">
                    </div>
                    <label for="body" class="control-message" >留言</label>
                    <textarea name="body" id="body" rows="3" placeholder="请输入留言" v-model="body"></textarea>
                </div>
                <div class="well-small">
                    <input type="submit" value="提   交" @click="prompt">
                </div>
            </form>
             <div class="error" v-if="this.errors">
                <div v-for="(error,key) in this.errors" :key="key">
                <span v-for="(msg,index) in error" v-text="msg" :key="index"></span>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from '../productVideo/components/Header'
import Footer from '../home/components/Footer'
import { Field } from 'mint-ui'
import { Toast } from 'mint-ui'

export default {
    name: 'Form',
    data(){
        return {
            name:'',
            phone:'',
            email:'',
            body:'',
            errors: {},
        }
    },
    components: {
        Header,
        Footer,
        Field
    },
    methods: {
        submitForm() {
            this.errors = {};
            this.axios.post('/messages/store', {
                name:this.name,
                phone:this.phone,
                email:this.email,
                body:this.body
            })
            .then((res) => {
                // console.log('oK');
                setTimeout(() => {
                    this.name = '';
                    this.phone = '';
                    this.email = '';
                    this.body = ''
                }, 1000);
                setTimeout(() => {
                    Toast({
                        message: '提交成功',
                        position: 'middle',
                        duration: 4000
                    });
                }, 1000);
            })
            .catch((error) => {
                if (error.response) {
                    // 请求已发出，但服务器响应的状态码不在 2xx 范围内
                    this.errors = error.response.data.errors;
                }
            });
            return false;
        },
        prompt(){
           
        }
    }
}
</script>
<style scoped>
.from{
    width: 100%;
    height: auto;
}
.from>h2{
    margin-top: .66rem;
    font-size: .36rem;
    color: #009ae8;
    text-align: center;
}
.from .headers{
    width: 100%;
    height: .6rem;
    background-color: #1d2977;
    line-height: .6rem;
}
.from .headers div{
    float: left;
    width: .53rem;
    height: .53rem;
    margin-left: .2rem;
}
.from .headers div img{
    width: 100%;
    height: auto;
}
.from .headers h2{
    font-size: .3rem;
    color: #fff;
    float: left;
}
.from .form{
    width: 100%;
    height: auto;
    margin-top: .4rem;
    text-align: center;
    margin-bottom: 4.6rem;
}
.from .form .form-group{
    height: .69rem;
    line-height: .69rem;
    position: relative;
    margin-top: .4rem;
}
.from .form .from-groups{
    height: 1rem;
}
.from .form .form-group .image{
    width: .44rem;
    height: .44rem;
    position: absolute;
    top: .1rem;
    left: 1.3rem;;
}
.from .form .form-group .image img{
    width: 100%;
    height: auto;
}
.from .form .form-group .image-1{
    width: .44rem;
    height: .44rem;
    position: absolute;
    top: .1rem;
    left: 1.3rem;;
}
.from .form .form-group .image-1 img{
    width: 100%;
    height: auto;
}
.from .form .form-group .image-2{
    width: .44rem;
    height: .44rem;
    position: absolute;
    top: .06rem;
    left: 1.3rem;;
}
.from .form .form-group .image-2 img{
    width: 100%;
    height: auto;
}
.from .form .form-group .image-3{
    width: .44rem;
    height: .44rem;
    position: absolute;
    top: .08rem;
    left: 1.3rem;;
}
.from .form .form-group .image-3 img{
    width: 100%;
    height: auto;
}
.from .form .form-group .control-message{
    font-size: .3rem;
    color: #999;
    margin-left: .5rem;
    vertical-align: top;
}
.from .form .form-group textarea{
    width: 181px;
    height: 50px;
    border: .01rem solid #ccc;
}
.from .form .form-group input{
    height: .6rem;
    border: .02rem solid #ccc;
}
.from .well-small{
    margin-top: 1.2rem;
}
.from .well-small input{
    /* margin-top: .6rem; */
    width: 3rem;
    height: .6rem;
    background: url("../../../static/img/bgcolor.png") no-repeat;
    background-size: 3rem .6rem;
    border: 0;
    color: #fff;
    outline: none;
}
.from .form .form-group label{
    font-size: .3rem;
    color: #999;
    margin-left: .5rem;
}
.from .error div:nth-child(1) span{
    position: absolute;
    top: 5.85rem;
    left: 2.5rem;
    color: red;
    z-index: 1;
}
.from .error div:nth-child(2) span{
    position: relative;
    top: -1.8rem;
    left: -.2rem;
    color: red;
    z-index: 1;
}
.from .error div:nth-child(3) span{
    position: relative;
    top: -5.8rem;
    left: -.2rem;
    color: red;
    z-index: 1;
}
.from .error div:nth-child(4) span{
    position: relative;
    top: -5.07rem;
    left: -.2rem;
    color: red;
    z-index: 1;
}
@media screen and (max-width: 320px) and (min-width: 320px) {
.from .form .form-group label{
    font-size: .3rem;
    color: #999;
    margin-left: 1.2rem;
}
.from .form .form-group .control-message{
    font-size: .3rem;
    color: #999;
    margin-left: 1.2rem;
    vertical-align: top;
}
.from .error div:nth-child(1) span{
    position: absolute;
    top: 5.85rem;
    left: 2.56rem;
    color: red;
    z-index: 1;
}
.from .error div:nth-child(2) span{
    position: relative;
    top: -1.6rem;
    left: -.0rem;
    color: red;
    z-index: 1;
}
.from .error div:nth-child(3) span{
    position: relative;
    top: -5.9rem;
    left: -.0rem;
    color: red;
    z-index: 1;
}
.from .error div:nth-child(4) span{
    position: relative;
    top: -5.25rem;
    left: -.0rem;
    color: red;
    z-index: 1;
}
} 
@media screen and (max-width: 360px) and (min-width: 360px) {
.from .form .form-group label{
    font-size: .3rem;
    color: #999;
    margin-left: .8rem;
}
.from .form .form-group .control-message{
    font-size: .3rem;
    color: #999;
    margin-left: .65rem;
    vertical-align: top;
}
.from .error div:nth-child(1) span{
    position: absolute;
     top: 5.9rem;
    left: 2.56rem;
    color: red;
    z-index: 1;
}
.from .error div:nth-child(2) span{
    position: relative;
    top: -1.7rem;
    left: -.1rem;
    color: red;
    z-index: 1;
}
.from .error div:nth-child(3) span{
    position: relative;
   top: -5.8rem;
    left: -.1rem;
    color: red;
    z-index: 1;
}
.from .error div:nth-child(4) span{
    position: relative;
    top: -5.09rem;
    left: -.1rem;
    color: red;
    z-index: 1;
}
} 
@media screen and (max-width: 415px) and (min-width: 414px) {
.from .form .form-group label{
    font-size: .3rem;
    color: #999;
    margin-left: .3rem;
}
.from .form .form-group .control-message{
    font-size: .3rem;
    color: #999;
    margin-left: .3rem;
    vertical-align: top;
}
.from .error div:nth-child(1) span{
    position: absolute;
     top: 5.85rem;
    left: 2.56rem;
    color: red;
    z-index: 1;
}
.from .error div:nth-child(2) span{
    position: relative;
    top: -1.8rem;
    left: -.2rem;
    color: red;
    z-index: 1;
}
.from .error div:nth-child(3) span{
    position: relative;
    top: -5.7rem;
    left: -.2rem;
    color: red;
    z-index: 1;
}
.from .error div:nth-child(4) span{
    position: relative;
    top: -4.95rem;
    left: -.2rem;
    color: red;
    z-index: 1;
}
} 
</style>
